<template>
  <div class="information">
    <div class="index-information-bg"></div>
    <img class="index-information-bg-mobile" src="@/static/index-information_0_mobile.png"/>
    <div class="nav">
      <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
      <span>/</span>
      <div>资讯动态</div>
    </div>
    <div class="information-content">
      <!-- tabs选项卡 -->
      <!-- <section class="box-tabs">
        <ul>
          <li @click="btnTabs(val)" :class="[tabs == val ? 'isClickTabs' : '']" v-for="(val, index) in tabsList" :key="index">{{ val }}</li>
        </ul>
      </section> -->
      <!-- 资讯内容list页 -->
      <section class="information-list">
        <div class="information-list-item" v-for="(val, index) in informationList" :key="index">
          <h1 class="information-list-item-title">
            <nuxt-link :to="{ path: `/news/detail/${val.id}` }">{{ val.title }}</nuxt-link>
          </h1>
          <p class="information-list-item-des">
            {{ val.desc }}
          </p>
          <div class="information-list-item-time">
            <span class="information-list-item-time-type">{{ val.type }}</span>
            <span class="information-list-item-time-text">{{ val.createTime }}</span>
          </div>
        </div>
      </section>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="totalPages"
        :base-url="`/news/`"
        first-number
        last-number
        class="pagination"
      ></b-pagination-nav>
    </div>
  </div>
</template>

<script>
import informationList from '@/static/data/informationList'
import axios from 'axios'
export default {
  data () {
    return {
      tabsList: ['全部', '新闻', '案例'],
      tabs: '全部',
      informationList: informationList,
      currentPage: 0,
      totalPages: 0
    }
  },
  async asyncData (context) {
    const res = await axios.get(`https://${process.env.VUE_APP_TITLE == 'test' ? 'test.' : '' }api.dingdingzn.com/dms/common/news/list?token=f23f6eec9b2107d441000d66d80f5541&pageNum=${context.params.id}&pageSize=10`, "GET").then(res => {
      return res.data.data.news
    })
    return {
      informationList: res.content,
      currentPage: context.params.id,
      totalPages: res.totalPages
    }
  },
  methods: {
  },
  head() {
    return {
      title: '电动自行车充电桩行业问题解答-叮叮充电桩',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: '电动自行车充电桩行业知识,电瓶车充电桩疑问解答,电动自行车行业动态'
        },
        {
          hid: 'description',
          name: 'description',
          content: '叮叮智能电动自行车充电桩提供了关于电动车充电桩如何安装运营，电瓶车充电桩小区解决方案，电瓶车充电桩的一切疑问进行解答，让您更好的了解充电动自行车充电桩行业，更好的运营电瓶车充电桩生意。'
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .information
    width: 100%
    height: auto
    .nav
      width: 1180px
      margin: 32px auto 0px
      font-size: 14px
      a
        text-decoration: none
        color: rgba(48, 54, 64, 0.5)
        &:hover
          color: #F57033
      span
        margin: 0 4px
      div
        width: 300px
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
    .index-information-bg
      min-width: 1180px
      background: url('../../static/index-information_0.png') no-repeat
      background-size: cover
      background-position: center
      height: 248px
    .index-information-bg-mobile
      display: none
    .information-content
      width: 1180px
      margin: 0 auto
      margin-top: 30px
      .box-tabs
        border-bottom: 1px #EBEBEB solid
        width: 100%
        height: 44px
        margin-bottom: 32px
        ul
          width: 100%
          padding: 0
          li
            width: 140px
            height: 44px
            text-align: center
            line-height: 44px
            list-style: none
            float: left
            color: rgba(48, 54, 64, 0.7)
            cursor: pointer
          .isClickTabs
            border-bottom: 3px #F57033 solid
            color: #F57033
      .information-list
        .information-list-item
          margin-bottom: 48px
          .information-list-item-title
            color: #282C32
            font-size: 24px
            line-height: 28px
            margin-bottom: 16px
            cursor: pointer
            overflow: hidden
            text-overflow: ellipsis
            white-space: nowrap
            a
              text-decoration: none
              color: rgba(40, 44, 50, 1)
              &:hover
                color: #F57033
          .information-list-item-des
            color: rgba(48, 54, 64, 0.6)
            font-size: 16px
            line-height: 24px
            margin-bottom: 16px
            overflow: hidden
            text-overflow: ellipsis
            display: -webkit-box
            -webkit-line-clamp: 2
            -webkit-box-orient: vertical
          .information-list-item-time
            .information-list-item-time-type
              color: rgba(48, 54, 64, 0.7)
              font-size: 12px
              line-height: 16px
              background: #F2F4F5
              border-radius: 4px
              padding: 2px 8px
              margin-right: 16px
            .information-list-item-time-text
              color: rgba(48, 54, 64, 0.5)
              font-size: 14px
              line-height: 20px
      .pagination
        margin: 48px 0 80px
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .information
    width: 100vw
    height: auto
    .nav
      width: 90vw
      margin: 20px auto
      font-size: 14px
      a
        text-decoration: none
        color: rgba(48, 54, 64, 0.5)
      span
        margin: 0 4px
    .index-information-bg-mobile
      width: 100vw
    .index-information-bg
      display: none
    .information-content
      width: 100vw
      margin: 20px auto 0
      .box-tabs
        border-bottom: 1px #EBEBEB solid
        width: 100w
        height: 44px
        margin-bottom: 32px
        ul
          width: 100%
          padding: 0
          li
            width: 20vw
            height: 44px
            text-align: center
            line-height: 44px
            list-style: none
            float: left
            color: rgba(48, 54, 64, 0.7)
            cursor: pointer
          .isClickTabs
            border-bottom: 3px #F57033 solid
            color: #F57033
      .information-list
        width: 90vw
        margin-left: 5vw
        .information-list-item
          margin-bottom: 36px
          .information-list-item-title
            color: #282C32
            font-size: 20px
            line-height: 28px
            margin-bottom: 12px
            cursor: pointer
            overflow: hidden
            text-overflow: ellipsis
            display: -webkit-box
            -webkit-line-clamp: 2
            -webkit-box-orient: vertical
            a
              text-decoration: none
              color: #282C32
          .information-list-item-des
            color: rgba(48, 54, 64, 0.7)
            font-size: 16px
            line-height: 24px
            margin-bottom: 12px
            overflow: hidden
            text-overflow: ellipsis
            display: -webkit-box
            -webkit-line-clamp: 4
            -webkit-box-orient: vertical
          .information-list-item-time
            .information-list-item-time-type
              color: rgba(48, 54, 64, 0.7)
              font-size: 12px
              line-height: 16px
              background: #F2F4F5
              border-radius: 4px
              padding: 2px 8px
              margin-right: 6px
            .information-list-item-time-text
              color: rgba(48, 54, 64, 0.5)
              font-size: 14px
              line-height: 20px
      .pagination
        margin: 10px 5vw
</style>
<style lang="sass">
.page-item.active .page-link 
  color: #F57033
  border-color: #F57033
  background: #fff
.page-link
  color: #333
  padding: 0.5rem 0.9rem
  font-size: 14px
</style>

